<script setup>
import {onMounted, ref} from "vue";
import Http from "@/http/http.js";
import moment from "moment";
import {filterTreeNode, getImgUrl, pageClick, pageObj} from "@/until/tool.js";
import {Message} from "@arco-design/web-vue";
import {useRouter} from "vue-router";
import XEUtils from "xe-utils";

const router = useRouter()

const columns = ref([{title: "序号", key: "序号", dataIndex: "序号"},
  {title: "标题", dataIndex: "ProfessionTitle"},
  {title: "缩略图", dataIndex: "ProfessionImg"},
  {title: "分类", dataIndex: "TypeId",},
  {title: "推荐", dataIndex: "Recommend",},
  {title: "访问", dataIndex: "ClicksNumber",},
  {title: "创建时间", dataIndex: "CreateTime",}])

const listData = ref([])
const newsType = ref([])
const typeData = ref([])
const keyword = ref(null)
const TypeId = ref(0)
const Recommend = ref(false)


onMounted(() => {
  getData()
  getNewsType()
})
const getData = async (criteria) => {
  keyword.value = criteria
  listData.value = []
  let Obj = {current: pageObj.value.current - 1, pageSize: pageObj.value.pageSize}
  if (criteria) {
    Obj['Keyword'] = criteria
  }
  if (TypeId.value) {
    Obj['TypeId'] = TypeId.value
  }
  if (Recommend.value) {
    Obj['Recommend'] = Recommend.value ? 1 : 0
  }
  const res = await Http.profession(Obj)
  if (res.Data) {
    listData.value = res.Data.Data;
    pageObj.value.total = res.Data["DataCount"]
  }
  if (listData.value) {
    listData.value.forEach(d => {
      d.CreateTime = moment(d.CreateTime).format("YYYY-MM-DD HH:mm:ss")
      if (d.TypeId) {
        let arr = d.TypeId.split(',')
        d.TypeId = Number(arr[1])
      }
    })
  }
}

const getNewsType = async () => {
  const res = await Http.professionType()
  newsType.value = res.Data;
  typeData.value = [{TypeId: 0, TypeName: "未选择分类", parentId: 1}, ...XEUtils.treeOneData(res["Data"], "TypeId", "ParentId", "children")];
}

const editProject = (data) => {
  if (Object.keys(data).length > 0) {
    router.push('/profession/professionDetail?ProfessionId=' + data.ProfessionId)
  } else { // 添加
    router.push('/profession/professionDetail')
  }
}


const delData = async (ProfessionId) => {
  const res = await Http.professionDel({ProfessionId});
  if (res["Msg"] === "OK") {
    Message.success(res.Data);
  }
  await getData(keyword.value);
}
const seaData = (criteria) => {
  getData(criteria)
}
const tableClick = (current) => {
  pageClick.tableClick(current)
  getData(keyword.value);
}

const pageSizeClick = (pageSize) => {
  pageClick.pageSizeClick(pageSize)
  getData(keyword.value);
}

const isTop = async (data) => {
  await Http.professionEdit({ProfessionId: data.ProfessionId, Recommend: data.Recommend})
  await getData(keyword.value);
}

const cascaderSolve = (data) => {
  if (data === 0) {
    TypeId.value = null;
  }
  TypeId.value = data;
  getData()
}

const alLData = () => {
  Recommend.value = false;
  TypeId.value = 0;
  getData(null)
}

const RecommendData = () => {
  Recommend.value = true;
  TypeId.value = null;
  getData(null)
}
</script>

<template>
  <a-card>
    <div class="sea">
      <a-space>
        <a-button @click="editProject({})" type="primary">添加行业检测</a-button>
        <span><a-tooltip :content="`按标题搜索`">关健词<component is="icon-question-circle"/></a-tooltip>:</span>
        <a-tooltip :content="`按标题搜索`">
          <a-input-search v-model="keyword" :style="{width:'320px'}" placeholder="按标题搜索" search-button @search="seaData"/>
        </a-tooltip>
        <span><a-tooltip :content="`按分类筛选`">分类<component is="icon-question-circle"/></a-tooltip>:</span>
        <a-tree-select v-model="TypeId" :data="typeData" style="width:300px;" :field-names="{ key: 'TypeId',
      title: 'TypeName'}" placeholder="按分类筛选" :filter-tree-node="filterTreeNode"  allow-search allow-clear @change="cascaderSolve"/>
        <a-button :type="TypeId===0?'primary':'dashed'" @click="alLData">所有行业检测</a-button>
        <a-button :type="Recommend?'primary':'dashed'" @click="RecommendData">推荐行业检测</a-button>
      </a-space>
    </div>
  </a-card>
  <a-card>
    <a-table :data="listData" :pagination="pageObj" @pageChange="tableClick" @page-size-change="pageSizeClick">
      <template #columns>
        <a-table-column v-for="(item,i) of columns" :title="item.title" :data-index="item.dataIndex" :key="i++">
          <template v-if="item.title==='序号'" #cell="{ rowIndex}">
            {{ rowIndex + 1 }}
          </template>
          <template v-if="item.title==='缩略图'" #cell="{ record }">
            <a-image :src="getImgUrl(record.ProfessionImg)" width="50" height="50"/>
          </template>
          <template v-if="item.title==='添加时间'" #cell="{ record }">
            <a-tag> {{ moment(record["CreateTime"]).format("YYYY-MM-DD") }}</a-tag>
          </template>
          <template v-if="item.title==='分类'" #cell="{ record }">
            <a-cascader v-model="record.TypeId" :options="typeData" style="width:300px;" :field-names="{ label: 'TypeName',
      value: 'TypeId'}" placeholder="未选择分类" disabled/>
          </template>
          <template v-if="item.title==='推荐'" #cell="{ record }">
            <a-switch v-model="record.Recommend" @change="isTop(record)">
              <template #checked>
                推荐
              </template>
              <template #unchecked>
                不推荐
              </template>
            </a-switch>
          </template>
        </a-table-column>
        <a-table-column title="操作">
          <template #cell="{ record,rowIndex }">
            <a-space>
              <a @click="editProject(record)">编辑</a>
              <a-popconfirm :content="`确定删除 ${record['ProfessionTitle']}?`" @ok="delData(record.ProfessionId)" okText="删除" cancelText="取消">
                <a>删除</a>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-card>
</template>

<style scoped lang="less">

::v-deep(.arco-select-view-single.arco-select-view-disabled) {
  color: #000 !important;
  }

::v-deep(.arco-select-view-icon) {
  display: none !important;
  }

::v-deep(.arco-select-view-single.arco-select-view-disabled) {
  background: transparent;
  }
</style>
